<template>
  <view v-if="show" class="payment-modal">
    <!-- 遮罩层 -->
    <view class="modal-mask" @click="handleClose"></view>

    <!-- 弹窗内容 -->
    <view class="modal-content">
      <!-- 兼职标题 -->
      <view class="job-title">{{ title }}</view>

      <!-- 支付信息 -->
      <view class="payment-info">
        <view class="total-amount">¥{{ totalAmount.toFixed(2) }}</view>
        <view class="payment-details">
          <text>{{ detailsText1 }}</text>
          <text>{{ detailsText2 }}</text>
        </view>
      </view>
      <view
        style="width: 748rpx;height: 1rpx;background: #EEF2F3; margin: 70rpx auto; margin-bottom: 50rpx; margin-left: -30rpx;">
      </view>

      <!-- 支付方式选择 -->
      <view class="payment-methods" v-if="showPaymentMethods">
        <view class="method-item" :class="{ active: selectedPayment === 'wechat' }" @click="selectedPayment = selectedPayment === 'wechat' ? '' : 'wechat'">
          <image :src="getFullImageUrl('@/static/index/wechat.png')"
            style="width: 40rpx;height: 40rpx; margin-right: 20rpx;"></image>
          <text class="method-name">微信支付</text>
          <view class="checkbox">
            <image :src="getFullImageUrl('@/static/index/noselect.png')" style="width: 30rpx;height: 30rpx;"
              v-if="selectedPayment !== 'wechat'"></image>
            <image :src="getFullImageUrl('@/static/index/select.png')" style="width: 30rpx;height: 30rpx;"
              v-if="selectedPayment === 'wechat'"></image>
          </view>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="modal-footer">
        <view class="confirm-pay-btn" @click="handleConfirm">{{ confirmText }}</view>
        <view class="cancel-btn" @click="handleClose">取消</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getFullImageUrl, initBaseUrl, request } from '../../utils/request';
export default {
  name: 'PaymentModal',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '支付酬金'
    },
    totalAmount: {
      type: Number,
      default: 0
    },
    detailsText1: {
      type: String,
      default: ''
    },
    detailsText2: {
      type: String,
      default: ''
    },
    confirmText: {
      type: String,
      default: '确认支付'
    },
    showPaymentMethods: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      selectedPayment: '', // 默认为未选中状态
      isModalVisible: false, // 用于跟踪模态框的可见状态
      isUserInitiated: false // 标记是否为用户主动操作
    }
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.selectedPayment = this.showPaymentMethods ? '' : 'wechat' // 不显示支付方式时默认微信
        this.isModalVisible = true
        // 添加延迟，确保是用户主动操作才触发支付
        setTimeout(() => {
          this.isUserInitiated = true
        }, 100)
      } else {
        this.isModalVisible = false
        this.isUserInitiated = false
      }
    }
  },
  methods: {
    getFullImageUrl,
    handleClose() {
      this.$emit('close')
    },
    handleConfirm() {
      // 确保是用户主动操作且模态框可见才触发支付
      if (!this.isModalVisible || !this.isUserInitiated) {
        return
      }
      
      if (this.showPaymentMethods && !this.selectedPayment) {
        uni.showToast({
          title: '请选择支付方式',
          icon: 'none'
        })
        return
      }
      
      const paymentMethod = this.showPaymentMethods ? this.selectedPayment : 'wechat'
      this.$emit('confirm', {
        paymentMethod: paymentMethod,
        amount: this.totalAmount
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.payment-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-radius: 30rpx 30rpx 0 0;
  padding: 30rpx;
  transform: translateY(0);
  transition: transform 0.3s ease-out;
}

// 兼职标题
.job-title {
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 32rpx;
  color: #0E1C37;
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  padding-bottom: 20rpx;
}

// 支付信息
.payment-info {
  text-align: center;
  margin-bottom: 60rpx;
}

.total-amount {
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 58rpx;
  color: #0E1C37;
  margin: 20rpx 0;
}

.payment-details {
  width: 500rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 24rpx;
  color: #A3A6B7;
  line-height: 50rpx;
  margin: 0 auto;
}

// 支付方式
.payment-methods {
  margin-bottom: 30rpx;
}

.method-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  border-radius: 16rpx;

  margin-bottom: 60rpx;
}

.method-item:last-child {
  border-bottom: none;
}

.method-name {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}

.checkbox {
  width: 36rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 弹窗底部按钮
.modal-footer {
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  .confirm-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 698rpx;
    height: 83rpx;
    background: #BEFF32;
    border-radius: 12rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 32rpx;
    color: #0E1C37;

    text-align: center;
    transition: all 0.3s ease;
  }

  .cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 698rpx;
    height: 83rpx;
    background-color: #ffffff;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 32rpx;
    color: #979797;

    text-align: center;
  }
}
</style>